<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <i-switch v-model="showDom" />
        </div>
        <div class="control" style="top:70px">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
        <!-- showDom 来控制显示状态 -->
        <!-- geometry 来控制显示位置 需要相对于当前位置移动，可以使用 transform 进行调整 -->
        <simpleMap-popup v-if="showDom" :simpleMap="mapId" :geometry="geometry">
            <div class="Text">
                {{TEXT}}
                <Button @click="TEXT='测试文字'">按钮</Button>
            </div>
        </simpleMap-popup>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
export default {
    data() {
        return {
            showDom: false,
            TEXT: '测试',
            mapId: null,
            // 双向绑定位置
            geometry: { longitude: -115.0, latitude: 37.0 },
            SenceMode: null,
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        this.SenceMode = map.SenceMode;
        // 浮动层需要绑定地图的 ID
        this.mapId = map.simpleId;
    },
    methods: {
        changeSenceMode(type) {
            map.SenceMode = type;
            this.SenceMode = type;
        }
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
</style>